<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<%@ include file="../base.jsp" %>
	<style>
	.content-wrapper{margin-left: 0px}
	</style>
</head>
<body class="hold-transition skin-blue sidebar-mini">
	<div class="wrapper">
		<!-- Content Wrapper. Contains page content -->
		<div class="content-wrapper">
			<!-- Content Header (Page header) -->
			<section class="content-header">
				<h1>视图管理<small>添加视图</small></h1>
				<ol class="breadcrumb">
					<li><a href="javascript:;"><i class="fa fa-dashboard"></i> 首页</a></li>
					<li class="active">添加视图</li>
				</ol>
			</section>
			<!-- Main content -->
			<section class="content">
				<div class="row">
			          <!-- /.box -->
			        <div class="col-md-12">
			        	<div class="nav-tabs-custom form-horizontal">
				            <ul class="nav nav-tabs">
				              <li class="active"><a href="#fa-icons" data-toggle="tab" aria-expanded="true"></a></li>
				            </ul>
				            <div class="tab-content">
				            	<div class="tab-pane active" id="fa-icons">
				            		<div class="row">
				            		<div class="col-md-3">
							          <div class="box box-solid">
							            <div class="box-header with-border">
							              <h3 class="box-title">数据集</h3>
							              <div class="box-tools">
							                <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
							                </button>
							              </div>
							            </div>
							            <div class="box-body no-padding">
							              <ul class="nav nav-pills nav-stacked">
							              	<!--  class="active" -->
							              	<c:forEach items="${tabelList }" var="list" varStatus="n">
							                	<li>
							                		<a class="dbaa" id="${n.index }"><i class="fa fa-inbox"></i> ${list.dbname }</a>
							                		<ul id="ul_${n.index }" class="hide11">
							                			<c:forEach items="${list.fielddata }" var="list1">
							                				<li>${list1 }</li>
							                				<input type="hidden" id="fielddata_${n.index }" value="${list.fielddata }">
							                				<input type="hidden" id="dbname_${n.index }" value="${list.dbname }">
							                			</c:forEach>
							                		</ul>
							                	</li>
							                </c:forEach>
							              </ul>
							            </div>
							            <!-- /.box-body -->
							          </div>
							          <!-- /.box -->
							        </div>
							        <form id="saveForm">
						            	<div class="col-md-9">
						            	   <div class="form-group">
							                 <div class="col-sm-3">
							                   <textarea rows="5" cols="100" name="querysql" id="querysql"></textarea>
							                 </div>
							               </div>
							               <div class="box-footer">
								                <a class="btn btn-default next1">下一步</a>
								                <a class="btn btn-warning cancel" href="${url }analysis/chart/chartList">返回</a>
								           </div>
							           </div>
							          </form>
						           </div>
				            	</div>
				            	<div class="tab-pane" id="fa-icons1">
				            	 <form id="saveForm2">
				            	 	<input type="hidden" id="charttype" value="">
				            		<div class="row">
					            		<div class="col-md-3">
								          <div class="box box-solid">
								            <div class="box-header with-border">
								              <h4 class="box-title">选择类型</h4>
								            </div>
								            <div class="box-body">
								              <!-- the events -->
								              <div id="external-events tudivs">
								                <div class="external-event tudiv" id="1">柱状图</div>
								                <div class="external-event tudiv" id="2">折线图</div>
								                <div class="external-event tudiv" id="3">饼状图</div>
								                <div class="external-event tudiv" id="4">散点图</div>
								              </div>
								            </div>
								            <!-- /.box-body -->
								          </div>
								          <!-- /.box -->
								        </div>
						            	<div class="col-md-9">
						            		<div class="form-group">
							                	<label for="inputEmail3" class="col-sm-2 control-label">小提示</label>
							                	<div class="col-sm-6" id="mytips" style="color: red;">
								                 </div>
							                </div>
						            		<div class="form-group">
						            	      <label for="inputEmail3" class="col-sm-2 control-label">图表名称</label>
							                   <div class="col-sm-3">
							                   		<input type="text" class="form-control" name="chartname" id="chartname">
							                 	</div>
						            	      <label for="inputEmail3" class="col-sm-1 control-label">X轴</label>
							                   <div class="col-sm-2">
							                   		<select id="xname" name="xname" class="form-control">
							                   		</select>
							                 	</div>
						            	      <label for="inputEmail3" class="col-sm-1 control-label">Y轴</label>
							                   <div class="col-sm-2">
							                   		<select id="yname" name="yname" class="form-control">
							                   		</select>
							                 	</div>
							                </div>
							            		<div class="box-footer" style="text-align: center;">
									                <a class="btn btn-success preview">预览</a>
									                <a class="btn btn-primary publish">发布</a>
									                <a class="btn btn-warning return2">返回</a>
									           </div>
									           <table class="table table-bordered" id="mytable">
								              </table>
							            	</div>
							            </div>
							         </form>
				            	</div>
				            	
				            	<div class="tab-pane" id="fa-icons2">
				            		<div class="row">
					            		<div class="col-md-3">
								          <div class="box box-solid">
								            <div class="box-header with-border">
								              <h4 class="box-title">选择视图</h4>
								            </div>
								            <div class="box-body">
								              <!-- the events -->
								              <div id="external-events">
								                <div class="external-event dd" id="1">柱状图</div>
								                <div class="external-event" id="2">折线图</div>
								                <div class="external-event" id="3">饼状图</div>
								                <div class="external-event" id="4">散点图</div>
								              </div>
								            </div>
								            <!-- /.box-body -->
								          </div>
								          <!-- /.box -->
								        </div>
						            	<div class="col-md-9">
							                <div class="form-group">
							                	<label for="inputEmail3" class="col-sm-2 control-label">预览区域</label>
							                	<div class="col-sm-3" style="height: 300px" id="viewarea">
								                 </div>
							                </div>
						            		<div class="box-footer" style="text-align: center;">
								                <a class="btn btn-primary confirm">确定</a>
								                <a class="btn btn-warning return3">取消</a>
								           </div>
							            </div>
				            		</div>
				            	</div>
				         </div>
			        </div>
			     </div>
			</section>
		</div>
	</div>
</body>
<script src="${url }bootstrap/js/jquery.validate.min.js"></script>
<script src="${url }bootstrap/js/messages_zh.js"></script>
<script src="${url }js/echarts.min.js"></script>
<script src="${url }js/anly_chart.js"></script>

<script type="text/javascript">
	$(function () {
		$('.dbaa').on('click',function(){
			var id = $(this).attr("id");
			 //style="display: none;"
			$(this).parent().parent().find("a").removeClass("dd");
			$(this).addClass("dd");
			
			$(this).parent().parent().find("ul").hide();
			$("#ul_"+id).show();
			
			var sj = $("#fielddata_"+id).val();
			var spstr =sj.substring(", ",sj.length);
			var reg = new RegExp('\\((.+?)\\)',"g");
			var sy = spstr.replace(reg," ");
			
			var querysql = "select " + sy + " from " + $("#dbname_"+id).val();
			$("#querysql").val(querysql)
		});
		
		$('.next1').on('click',function(){
			if($("#saveForm").valid()){
				var loadindex = layer.load(0,{shade:[0.8,'#333']});
				$.post("${url}analysis/chart/datalist",{querySql:$("#querysql").val()},function(data){
					$("#fa-icons1").addClass("active");
					$("#fa-icons").removeClass("active");
					$("#fa-icons2").removeClass("active");
					layer.close(loadindex);
					
					var keyarray = new Array();
					var mytable = "";
					for (var i = 0; i < data.length; i++) {
						if(i == 0){
							mytable += "<tr>";
							var option = "";
							for (var key in data[i]) {
								keyarray.push(key);
								mytable += "<th>"+key+"</th>";
								option += "<option value='"+key+"'>"+key+"</option>";
							}
							$("#xname").html(option);
							$("#yname").html(option);
							mytable += "</tr>";
						}
						mytable += "<tr>";
						for (var j = 0; j < keyarray.length; j++) {
							var key = keyarray[j];
							mytable += "<td>"+data[i][key]+"</td>";
						}
						mytable += "</tr>";
						
					}
					$("#mytable").html(mytable);
				});
			}
		});
		$('.publish').on('click',function(){
			if($("#saveForm2").valid()){
				var chartName = $("#chartname").val();
				var xzhou = $("#xname").val();
				var yzhou = $("#yname").val();
				var querysql = $("#querysql").val();
				var charttype = $("#charttype").val();
				
				if(!charttype){
					layer.alert("请选择类型");
					return;
				}
				
				//iframe层
				layer.open({
				  type: 2,
				  title: '发布图表',
				  shadeClose: true,
				  shade: 0.8,
				  area: ['100%', '100%'],
				  maxmin:true,
				  content: '${url }analysis/chart/toPublish?chartname='+chartName+"&xzhou="+xzhou+"&yzhou="+yzhou+"&querysql="+querysql+"&charttype="+charttype //iframe的url
				});
			}
		});
		$('.return2').on('click',function(){
			if($("#saveForm").valid()){
				$("#fa-icons1").removeClass("active");
				$("#fa-icons2").removeClass("active");
				$("#fa-icons").addClass("active");
			}
		});
		
		$('.return3').on('click',function(){
			if($("#saveForm").valid()){
				$("#fa-icons").removeClass("active");
				$("#fa-icons2").removeClass("active");
				$("#fa-icons1").addClass("active");
			}
		});
		
		$('.tudiv').on('click',function(){
			var id = $(this).attr("id");
			if(id == 1){
				$("#mytips").html("Y轴请选择一个数值类型，否则可能导致预览失败");
	    	}else if(id == 2){
	    		$("#mytips").html("Y轴请选择一个数值类型，否则可能导致预览失败");
	    	}else if(id == 3){
	    		$("#mytips").html("Y轴请选择一个数值类型，否则可能导致预览失败");
	    	}else{
	    		$("#mytips").html("X轴和Y轴请选择一个数值类型，否则导致预览失败");
	    	}
			
			$(this).parent().find("div").removeClass("dd");
			$(this).addClass("dd");
			$("#charttype").val(id);
		});
	});
	
	$("#saveForm").validate({
	    rules: {
	    	querysql:'required'
	    }
	});
	$("#saveForm2").validate({
	    rules: {
	    	chartname:'required'
	    }
	});
	
	$('.preview').on('click',function(){
		if($("#saveForm2").valid()){
			var charttype = $("#charttype").val();
			if(!charttype){
				layer.alert("请选择类型");
				return;
			}
			var chartName = $("#chartname").val();
			// 基于准备好的dom，初始化echarts实例
	        var myChart = echarts.init(document.getElementById('viewarea'));
			
			var xzhou = $("#xname").val();
			var yzhou = $("#yname").val();
			var querysql = $("#querysql").val();
			
			//iframe层
			layer.open({
			  type: 2,
			  title: '预览图表',
			  shadeClose: true,
			  shade: 0.8,
			  area: ['780px', '50%'],
			  content: '${url }/analysis/chart/datapreview?chartname='+chartName+"&xzhou="+xzhou+"&yzhou="+yzhou+"&querysql="+querysql+"&charttype="+charttype //iframe的url
			});
		}
	});
	</script>
	<style>
		.error{color:red;font-weight: 500;}
		.external-event{  
		  cursor: pointer;
		}
		.hide11{display: none;}
		.dd{background: #DDD;}
	</style>
</html>